<template>
  <div class="login_container">
    <div class="background"></div>
    <div class="title">注册</div>
    <div class="login_box">
      <el-form
          class="login_form"
          ref="formRef"
          style="max-width: 600px"
          :model="formState"
          label-width="auto">
        <el-form-item
            prop="username"
            label="用户名"
            :rules="[{required: true,message: '请输入用户名',trigger: 'blur'}]">
          <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="formState.username"/>
        </el-form-item>

        <el-form-item
            prop="nickname"
            label="昵称"
            :rules="[{required: true,message: '请输入昵称',trigger: 'blur'}]">
          <el-input :prefix-icon="User" placeholder="请输入昵称" v-model="formState.nickname"/>
        </el-form-item>

        <el-form-item
            prop="password"
            label="密码"
            :rules="[{required: true,message: '请输入密码',trigger: 'blur'}]">
          <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" show-password v-model="formState.password"/>
        </el-form-item>

        <el-form-item
            prop="password"
            label="确认密码"
            :rules="[{required: true,message: '请输入确认密码',trigger: 'blur'}]">
          <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" show-password v-model="formState.password2"/>
        </el-form-item>

        <el-form-item
            prop="email"
            label="邮箱"
            :rules="[{required: true,message: '请输入邮箱',trigger: 'blur'}]">
          <el-input :prefix-icon="User" placeholder="请输入邮箱" v-model="formState.email"/>
        </el-form-item>

        <el-form-item
            prop="phone"
            label="手机号"
            :rules="[{required: true,message: '请输入手机号',trigger: 'blur'}]">
          <el-input :prefix-icon="User" placeholder="请输入手机号" v-model="formState.phone"/>
        </el-form-item>

        <el-form-item
            prop="sex"
            label="性别"
            :rules="[{required: true,message: '请选择性别',trigger: 'blur'}]">
          <el-radio-group v-model="formState.sex">
            <el-radio :value="1">男</el-radio>
            <el-radio :value="0">女</el-radio>
          </el-radio-group>
        </el-form-item>


        <el-form-item>
          <el-button style="width: 100%" @click="onFinish" type="primary">注册</el-button>
        </el-form-item>
        <div>
          <el-button type="primary" @click="router.push('/login')" link>
            已有账户，去登录
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup name="RegisterView" lang="ts">
import {Lock, User} from '@element-plus/icons-vue'
import {reactive} from 'vue';
import {useRouter} from 'vue-router';
import axios from "@/axios/api";
import {ElMessage} from "element-plus";
import type Result from "@/model/Result";

interface FormState {
  username: string;
  password: string;
  password2: string;
  phone: string;
  sex: number;
  nickname: string;
  email: string;
}

const register = (form: FormState) => {
  return axios.post<Result<string>>(`/api/v1/user/register`, form);
};
const formState = reactive<FormState>({
  username: '',
  password: '',
  password2: '',
  phone: '',
  sex: 1,
  nickname: '',
  email: ''
});


const router = useRouter()
const onFinish = () => {
  if (formState.password !== formState.password2) {
    ElMessage.error("确认密码与密码不一致");
    return;
  }
  register(formState).then((resp) => {
        localStorage.setItem('token', resp.data.data || '');
        ElMessage.success("注册成功");
        router.push("/login");
      }
  )
};

</script>


<style lang="less" scoped>
.background {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  background: url("@/assets/login_back.jpg");
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
}

.login_box {
  width: 400px;
  height: 440px;
  padding: 10px 0;
  background-color: rgba(221, 221, 221, 0.8);
  border-radius: 3px;
  position: absolute; //移动
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); //移动到正中心
}

.btns {
  display: flex;
  justify-content: center; //尾部对齐
}

.login_form {
  width: 100%;
  padding: 20px !important;
  box-sizing: border-box;
}
</style>